<template>
  <div>
    <div v-if="!route.query.groupId" v-for="val in list" :key="val.tId">
      <div class="formBox">
        <el-form ref="formRef" :model="val" :rules="rules" label-width="120px">
          <el-row>
            <el-form-item label="组别名称" prop="name">
              <el-input
                v-model="val.name"
                placeholder="请输入组别名称"
                clearable
                style="width: 600px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-row>
          <el-row :init="true">
            <el-form-item label="年龄区间" prop="min" />
            <el-from-item prop="min">
              <el-date-picker
                v-model="val.max"
                type="date"
                placeholder="最大年龄"
                value-format="YYYY-MM-DD"
                :disabledDate="disabledDateMax"
                @change="changeTimer1"
                style="width: 290px"
              />
            </el-from-item>
            <div style="line-height: 30px; padding: 0 6px">~</div>
            <el-from-item prop="max">
              <el-date-picker
                v-model="val.min"
                type="date"
                placeholder="最小年龄"
                :disabledDate="disabledDateMin"
                @change="changeTimer2"
                value-format="YYYY-MM-DD"
                style="width: 290px"
              />
            </el-from-item>
          </el-row>
          <el-row>
            <el-form-item label="是否有级别" prop="hasNext">
              <el-radio-group v-model="val.hasNext" @change="changeShow">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>

          <div v-if="val.hasNext">
            <el-row>
              <el-form-item label="是否有拆分" prop="hasSon" v-if="sonShow">
                <el-radio-group v-model="val.hasSon" @change="changeSon">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <div>
              <div v-if="status && val.hasNext">
                <el-form-item label="男子分组级别" prop="maleSupplement">
                  <el-input
                    v-model="val.maleSupplement.name"
                    :placeholder="
                      val.hasSon
                        ? '请填写分组级别，如：20KG-45KG'
                        : '请填写分组级别，如：10kg,20kg,30kg'
                    "
                    style="width: 600px"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
                <el-form-item
                  label="男子级别拆分"
                  prop="maleSupplement.name"
                  v-if="val.hasSon"
                >
                  <el-input
                    v-for="(item, index) in val.maleSupplement?.list"
                    :key="index"
                    v-model="item.name"
                    placeholder="请填写级别"
                    class="eInput"
                    @keyup.enter="handleQuery"
                  />
                  <el-button
                    class="button"
                    type="primary"
                    @click="addRank(val.maleSupplement?.list)"
                    >+ 级别</el-button
                  >
                  <el-button
                    v-if="val.maleSupplement?.list?.length > 0"
                    class="button"
                    type="primary"
                    @click="delRank(val.maleSupplement?.list)"
                    >删除</el-button
                  >
                </el-form-item>
              </div>
              <div v-if="status && val.hasNext">
                <el-form-item label="女子分组级别" prop="femaleSupplement">
                  <el-input
                    v-model="val.femaleSupplement.name"
                    :placeholder="
                      son
                        ? '请填写分组级别，如：20KG-45KG'
                        : '请填写分组级别，如：10kg,20kg,30kg'
                    "
                    style="width: 600px"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
                <el-form-item
                  label="女子级别拆分"
                  prop="femaleSupplement.name"
                  v-if="val.hasSon"
                >
                  <el-input
                    v-for="(item, index) in val.femaleSupplement?.list"
                    v-model="item.name"
                    :key="index"
                    placeholder="请填写级别"
                    class="eInput"
                    @keyup.enter="handleQuery"
                  />
                  <el-button
                    class="button"
                    type="primary"
                    @click="addRank(val.femaleSupplement?.list)"
                    >+ 级别</el-button
                  >
                  <el-button
                    v-if="val.femaleSupplement?.list?.length > 0"
                    class="button"
                    type="primary"
                    @click="delRank(val.femaleSupplement?.list)"
                    >删除</el-button
                  >
                </el-form-item>
              </div>
              <div v-if="!status && val.hasNext">
                <el-form-item label="分组级别" prop="commonSupplement">
                  <el-input
                    v-model="val.commonSupplement.name"
                    :placeholder="
                      son
                        ? '请填写分组级别，如：20KG-45KG'
                        : '请填写分组级别，如：10kg,20kg,30kg'
                    "
                    style="width: 600px"
                    @keyup.enter="handleQuery"
                  />
                </el-form-item>
                <el-form-item
                  label="级别拆分"
                  prop="commonSupplement.name"
                  v-if="val.hasSon"
                >
                  <el-input
                    v-for="(item, index) in val.commonSupplement?.list"
                    :key="index"
                    v-model="item.name"
                    placeholder="请填写级别"
                    class="eInput"
                    @keyup.enter="handleQuery"
                  />
                  <el-button
                    class="button"
                    type="primary"
                    @click="addRank(val.commonSupplement?.list)"
                    >+ 级别</el-button
                  >
                  <el-button
                    v-if="val.commonSupplement?.list?.length > 0"
                    class="button"
                    type="primary"
                    @click="delRank(val.commonSupplement?.list)"
                    >删除</el-button
                  >
                </el-form-item>
              </div>
            </div>

            <!-- 编辑时显示 -->
            <!-- <div v-else>
          <div v-if="status">
            <el-form-item
              label="男子分组级别"
              prop="props.groupId ? '':maleSupplement"
            >
              <span v-for="item in queryParams.maleLevelList" :key="item.id">
                <el-input
                  @change="manChange(item)"
                  v-model="item.name"
                  :placeholder="
                    son
                      ? '请填写分组级别，如：20KG-45KG'
                      : '请填写分组级别，如：10kg,20kg,30kg'
                  "
                  style="width: 100px"
                  @keyup.enter="handleQuery"
                >
                </el-input>
                <span
                  class="iconSpan"
                  v-if="item.hasSon == 0"
                  @click="delRankFF(item)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>
              <el-button
                v-if="queryParams?.hasSon == 0"
                class="button"
                type="primary"
                @click="addRankFF(queryParams, queryParams.maleLevelList, 1)"
                >+ 级别</el-button
              >
            </el-form-item>
            <el-form-item
              label="男子级别拆分"
              prop="maleSupplement.name"
              v-if="queryParams.hasSon"
            >
              <span v-for="(item, index) in queryParams.maleSonLevelList">
                <el-input
                  :key="index"
                  v-model="item.name"
                  placeholder="请填写级别"
                  class="eInput"
                  @change="RankChange(item)"
                />
                <span
                  class="iconSpan"
                  @click="delRankFN(item, queryParams.maleSonLevelList)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>

              <el-button
                class="button"
                type="primary"
                @click="
                  addRankFN(
                    queryParams.maleSonLevelList,
                    queryParams.maleLevelList,
                    1
                  )
                "
                >+ 级别</el-button
              >
            </el-form-item>
          </div>
          <div v-if="status">
            <el-form-item
              label="女子分组级别"
              prop="props.groupId ? '':maleSupplement"
            >
              <span v-for="item in queryParams.femaleLevelList" :key="item.id">
                <el-input
                  @change="manChange(item)"
                  v-model="item.name"
                  :placeholder="
                    son
                      ? '请填写分组级别，如：20KG-45KG'
                      : '请填写分组级别，如：10kg,20kg,30kg'
                  "
                  style="width: 100px"
                  @keyup.enter="handleQuery"
                >
                </el-input>
                <span
                  class="iconSpan"
                  v-if="item.hasSon == 0"
                  @click="delRankFF(item)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>
              <el-button
                v-if="queryParams?.hasSon == 0"
                class="button"
                type="primary"
                @click="addRankFF(queryParams, queryParams.femaleLevelList, 2)"
                >+ 级别</el-button
              >
            </el-form-item>
            <el-form-item
              label="女子级别拆分"
              prop="maleSupplement.name"
              v-if="queryParams.hasSon"
            >
              <span v-for="(item, index) in queryParams.femaleSonLevelList">
                <el-input
                  :key="index"
                  v-model="item.name"
                  placeholder="请填写级别"
                  class="eInput"
                  @change="RankChange(item, queryParams.femaleSonLevelList)"
                />
                <span class="iconSpan" @click="delRankFN(item)">
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>

              <el-button
                class="button"
                type="primary"
                @click="
                  addRankFN(
                    queryParams.femaleSonLevelList,
                    queryParams.femaleLevelList,
                    2
                  )
                "
                >+ 级别</el-button
              >
            </el-form-item>
          </div>
          <div v-if="!status">
            <el-form-item label="组别" prop="props.groupId ? '':maleSupplement">
              <span v-for="item in queryParams.commonList" :key="item.id">
                <el-input
                  @change="manChange(item)"
                  v-model="item.name"
                  :placeholder="
                    son
                      ? '请填写分组级别，如：20KG-45KG'
                      : '请填写分组级别，如：10kg,20kg,30kg'
                  "
                  style="width: 100px"
                  @keyup.enter="handleQuery"
                >
                </el-input>
                <span
                  class="iconSpan"
                  v-if="item?.hasSon == 0"
                  @click="delRankFF(item)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>
              <el-button
                v-if="queryParams?.hasSon == 0"
                class="button"
                type="primary"
                @click="addRankFF(queryParams, queryParams.commonList, 0)"
                >+ 级别</el-button
              >
            </el-form-item>
            <el-form-item
              label="级别拆分"
              prop="maleSupplement.name"
              v-if="queryParams.hasSon"
            >
              <span v-for="(item, index) in queryParams.commonSonLevelList">
                <el-input
                  :key="index"
                  v-model="item.name"
                  placeholder="请填写级别"
                  class="eInput"
                  @change="RankChange(item)"
                />
                <span
                  class="iconSpan"
                  @click="delRankFN(item, queryParams.commonSonLevelList)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>

              <el-button
                class="button"
                type="primary"
                @click="
                  addRankFN(
                    queryParams.commonSonLevelList,
                    queryParams.commonList,
                    0
                  )
                "
                >+ 级别</el-button
              >
            </el-form-item>
          </div>
        </div> -->
          </div>
        </el-form>
        <el-button
          class="warningButton"
          type="warning"
          v-if="list?.length > 1"
          @click="delList(val)"
          >删除</el-button
        >
      </div>
    </div>
    <el-form
      v-if="route.query.groupId"
      ref="formRef"
      :model="queryParams"
      :rules="rules"
      label-width="120px"
    >
      <el-row>
        <el-form-item label="组别名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入组别名称"
            clearable
            style="width: 600px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
      </el-row>
      <el-row :init="true">
        <el-form-item label="年龄区间" prop="min" />
        <el-from-item prop="min">
          <el-date-picker
            v-model="queryParams.max"
            type="date"
            placeholder="最大年龄"
            value-format="YYYY-MM-DD"
            :disabledDate="disabledDateMax"
            style="width: 290px"
          />
        </el-from-item>
        <div style="line-height: 30px; padding: 0 6px">~</div>
        <el-from-item prop="max">
          <el-date-picker
            v-model="queryParams.min"
            type="date"
            placeholder="最小年龄"
            :disabledDate="disabledDateMin"
            value-format="YYYY-MM-DD"
            style="width: 290px"
          />
        </el-from-item>
      </el-row>
      <el-row>
        <el-form-item label="是否有级别" prop="hasNext">
          <el-radio-group v-model="queryParams.hasNext" @change="changeShow">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

      <div v-if="queryParams.hasNext">
        <el-row>
          <el-form-item
            label="是否有拆分"
            prop="hasSon"
            v-if="
              (sonShow && queryParams?.maleLevelList?.length > 0) ||
              (sonShow && queryParams?.femaleLevelList?.length > 0) ||
              (sonShow && queryParams?.commonList?.length > 0)
            "
          >
            <el-radio-group v-model="queryParams.hasSon" @change="changeSon">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>

        <!-- <div v-if="!route.query.groupId">
          <div v-if="queryParams.hasNext">
            <el-form-item label="男子分组级别" prop="maleSupplement">
              <el-input
                v-model="queryParams.maleSupplement.name"
                :placeholder="
                  queryParams.son
                    ? '请填写分组级别，如：20KG-45KG'
                    : '请填写分组级别，如：10kg,20kg,30kg'
                "
                style="width: 600px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item
              label="男子级别拆分"
              prop="maleSupplement.name"
              v-if="queryParams.hasSon"
            >
              <el-input
                v-for="(item, index) in queryParams.maleSupplement?.list"
                :key="index"
                v-model="item.name"
                placeholder="请填写级别"
                class="eInput"
                @keyup.enter="handleQuery"
              />
              <el-button
                class="button"
                type="primary"
                @click="addRank(queryParams.maleSupplement?.list)"
                >+ 级别</el-button
              >
              <el-button
                v-if="queryParams.maleSupplement?.list?.length > 0"
                class="button"
                type="primary"
                @click="delRank(queryParams.maleSupplement?.list)"
                >删除</el-button
              >
            </el-form-item>
          </div>
          <div v-if="queryParams.hasNext">
            <el-form-item label="女子分组级别" prop="femaleSupplement">
              <el-input
                v-model="queryParams.femaleSupplement.name"
                :placeholder="
                  son
                    ? '请填写分组级别，如：20KG-45KG'
                    : '请填写分组级别，如：10kg,20kg,30kg'
                "
                style="width: 600px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item
              label="女子级别拆分"
              prop="femaleSupplement.name"
              v-if="queryParams.hasSon"
            >
              <el-input
                v-for="(item, index) in queryParams.femaleSupplement?.list"
                v-model="item.name"
                :key="index"
                placeholder="请填写级别"
                class="eInput"
                @keyup.enter="handleQuery"
              />
              <el-button
                class="button"
                type="primary"
                @click="addRank(queryParams.femaleSupplement?.list)"
                >+ 级别</el-button
              >
              <el-button
                v-if="queryParams.femaleSupplement?.list?.length > 0"
                class="button"
                type="primary"
                @click="delRank(queryParams.femaleSupplement?.list)"
                >删除</el-button
              >
            </el-form-item>
          </div>
          <div v-if="!queryParams.hasNext">
            <el-form-item label="分组级别" prop="commonSupplement">
              <el-input
                v-model="queryParams.commonSupplement.name"
                :placeholder="
                  son
                    ? '请填写分组级别，如：20KG-45KG'
                    : '请填写分组级别，如：10kg,20kg,30kg'
                "
                style="width: 600px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item
              label="级别拆分"
              prop="commonSupplement.name"
              v-if="queryParams.hasSon"
            >
              <el-input
                v-for="(item, index) in queryParams.commonSupplement?.list"
                :key="index"
                v-model="item.name"
                placeholder="请填写级别"
                class="eInput"
                @keyup.enter="handleQuery"
              />
              <el-button
                class="button"
                type="primary"
                @click="addRank(queryParams.commonSupplement?.list)"
                >+ 级别</el-button
              >
              <el-button
                v-if="queryParams.commonSupplement?.list?.length > 0"
                class="button"
                type="primary"
                @click="delRank(queryParams.commonSupplement?.list)"
                >删除</el-button
              >
            </el-form-item>
          </div>
        </div> -->

        <!-- 编辑时显示 -->
        <div v-if="route.query.groupId">
          <div v-if="status">
            <el-form-item
              label="男子分组级别"
              prop="props.groupId ? '':maleSupplement"
            >
              <span v-for="item in queryParams.maleLevelList" :key="item.id">
                <el-input
                  @change="manChange(item)"
                  v-model="item.name"
                  :placeholder="
                    queryParams.hasSon
                      ? '请填写分组级别，如：20KG-45KG'
                      : '请填写分组级别，如：10kg,20kg,30kg'
                  "
                  style="width: 100px"
                  @keyup.enter="handleQuery"
                >
                </el-input>
                <span
                  class="iconSpan"
                  v-if="!queryParams.hasSon"
                  @click="delRankFF(item)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>
              <el-button
                v-if="queryParams?.hasSon == 0"
                class="button"
                type="primary"
                @click="addRankFF(queryParams, queryParams.maleLevelList, 1)"
                >+ 级别</el-button
              >
            </el-form-item>
            <el-form-item
              label="男子级别拆分"
              prop="maleSupplement.name"
              v-if="
                queryParams?.maleLevelList?.length > 0 && queryParams.hasSon
              "
            >
              <span v-for="(item, index) in queryParams.maleSonLevelList">
                <el-input
                  :key="index"
                  v-model="item.name"
                  placeholder="请填写级别"
                  class="eInput"
                  @change="RankChange(item)"
                />
                <span
                  class="iconSpan"
                  @click="delRankFN(item, queryParams.maleSonLevelList)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>

              <el-button
                class="button"
                type="primary"
                @click="
                  addRankFN(
                    queryParams.maleSonLevelList,
                    queryParams.maleLevelList,
                    1
                  )
                "
                >+ 级别</el-button
              >
            </el-form-item>
          </div>
          <div v-if="status">
            <el-form-item
              label="女子分组级别"
              prop="props.groupId ? '':maleSupplement"
            >
              <span v-for="item in queryParams.femaleLevelList" :key="item.id">
                <el-input
                  @change="manChange(item)"
                  v-model="item.name"
                  :placeholder="
                    son
                      ? '请填写分组级别，如：20KG-45KG'
                      : '请填写分组级别，如：10kg,20kg,30kg'
                  "
                  style="width: 100px"
                  @keyup.enter="handleQuery"
                >
                </el-input>
                <span
                  class="iconSpan"
                  v-if="!queryParams.hasSon"
                  @click="delRankFF(item)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>
              <el-button
                v-if="queryParams?.hasSon == 0"
                class="button"
                type="primary"
                @click="addRankFF(queryParams, queryParams.femaleLevelList, 2)"
                >+ 级别</el-button
              >
            </el-form-item>
            <el-form-item
              label="女子级别拆分"
              prop="maleSupplement.name"
              v-if="
                queryParams?.femaleLevelList?.length > 0 && queryParams.hasSon
              "
            >
              <span v-for="(item, index) in queryParams.femaleSonLevelList">
                <el-input
                  :key="index"
                  v-model="item.name"
                  placeholder="请填写级别"
                  class="eInput"
                  @change="RankChange(item, queryParams.femaleSonLevelList)"
                />
                <span class="iconSpan" @click="delRankFN(item)">
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>

              <el-button
                class="button"
                type="primary"
                @click="
                  addRankFN(
                    queryParams.femaleSonLevelList,
                    queryParams.femaleLevelList,
                    2
                  )
                "
                >+ 级别</el-button
              >
            </el-form-item>
          </div>
          <div v-if="!status">
            <el-form-item label="组别" prop="props.groupId ? '':maleSupplement">
              <span v-for="item in queryParams.commonList" :key="item.id">
                <el-input
                  @change="manChange(item)"
                  v-model="item.name"
                  :placeholder="
                    son
                      ? '请填写分组级别，如：20KG-45KG'
                      : '请填写分组级别，如：10kg,20kg,30kg'
                  "
                  style="width: 100px"
                  @keyup.enter="handleQuery"
                >
                </el-input>
                <span
                  class="iconSpan"
                  v-if="!queryParams.hasSon"
                  @click="delRankFF(item)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>
              <el-button
                v-if="queryParams?.hasSon == 0"
                class="button"
                type="primary"
                @click="addRankFF(queryParams, queryParams.commonList, 0)"
                >+ 级别</el-button
              >
            </el-form-item>
            <el-form-item
              label="级别拆分"
              prop="maleSupplement.name"
              v-if="queryParams?.commonList?.length > 0 && queryParams.hasSon"
            >
              <span v-for="(item, index) in queryParams.commonSonLevelList">
                <el-input
                  :key="index"
                  v-model="item.name"
                  placeholder="请填写级别"
                  class="eInput"
                  @change="RankChange(item)"
                />
                <span
                  class="iconSpan"
                  @click="delRankFN(item, queryParams.commonSonLevelList)"
                >
                  <el-icon :size="20" :color="color"> <Close /> </el-icon
                ></span>
              </span>

              <el-button
                class="button"
                type="primary"
                @click="
                  addRankFN(
                    queryParams.commonSonLevelList,
                    queryParams.commonList,
                    0
                  )
                "
                >+ 级别</el-button
              >
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <br />
    <el-row justify="center">
      <el-button type="primary" @click="upStep">上一步</el-button>
      <el-button type="primary" @click="nextStep">保 存</el-button>
      <el-button type="primary" v-if="!route.query.groupId" @click="addList"
        >+ 组别</el-button
      >
    </el-row>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import {
  addGroup,
  groupDetailsApi,
  UpdateGroupApi,
  addGroupChi,
  UpdateClassApi,
  delClass,
  delCompetitionSonLevel,
  updateSonLevel,
  addSonLevel,
  addGroups,
} from "@/api/match/CompetitionProject.js";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const cptId = ref(route.query.cptId);
const cptProjectId = ref(route.query.cptProjectId);
const flag = ref(false);
const status = ref(false);
const emit = defineEmits(["nextStep"]);
const nowTime = ref(new Date());
const show = ref(false);
const son = ref(false);
const sonShow = ref(false);
const groupId = ref();
const add = ref(false);
const ageMin = ref();
const ageMax = ref();
const nowDate = ref(new Date().getTime());
const list = ref([
  {
    hasNext: 0,
    hasSon: 0,
    maleSupplement: {
      name: "",
      list: [],
    },
    femaleSupplement: {
      name: "",
      list: [],
    },
    commonSupplement: {
      name: "",
      list: [],
    },
    tId: nowDate.value,
    cptId: props.cptId,
    cptProjectId: props.cptProjectId,
  },
]);

const props = defineProps({
  // 编辑还是添加
  repair: {
    type: String,
  },
  // 项目类型
  signType: {
    type: String,
  },
  // 赛事id
  cptId: {
    type: String,
  },
  // 项目id
  cptProjectId: {
    type: String,
  },
  // 组id
  groupId: {
    type: String,
  },
});
const type = ref(props.signType);

const data = reactive({
  queryParams: {
    hasNext: 0,
    hasSon: 0,
    maleSupplement: {
      name: "",
      list: [],
    },
    femaleSupplement: {
      name: "",
      list: [],
    },
    commonSupplement: {
      name: "",
      list: [],
    },
  },
  form: {},
  rules: {
    commonSupplement: {
      required: true,
      message: "请输入通用级别",
      trigger: "blur",
    },
    maleSupplement: {
      required: true,
      message: "请输入男子级别",
      trigger: "blur",
    },
    femaleSupplement: {
      required: true,
      message: "请输入女子级别",
      trigger: "blur",
    },
    name: { required: true, message: "请输入项目名称", trigger: "blur" },
    hasNext: { required: true, message: "请选择是否有级别", trigger: "blur" },
    hasSon: { required: true, message: "请选择是否拆分", trigger: "blur" },
    // "commonSupplement.name": [
    //   {
    //     required: true,
    //     message: "请输入拆分级别",
    //     trigger: "blur",
    //   },
    //   { validator: validateSon, trigger: "blur" },
    // ],

    // "maleSupplement.name": {
    //   required: true,
    //   message: "请输入拆分级别",
    //   trigger: "blur",
    // },
    // "femaleSupplement.name": {
    //   required: true,
    //   message: "请输入拆分级别",
    //   trigger: "blur",
    // },
    min: [
      { required: true, message: "请输入年龄范围", trigger: "blur" },
      { validator: validateMin, trigger: "blur" },
    ],
  },
});
const { queryParams, rules, form } = toRefs(data);

function validateMin(rule, value, callback) {
  const min = Number(queryParams.value.min);
  const max = Number(queryParams.value.max);
  if (
    min == "" ||
    min == undefined ||
    min == null ||
    max == "" ||
    max == undefined ||
    max == null
  ) {
    callback(new Error("请输入正确的年龄范围"));
  } else {
    callback();
  }

  // if (value <= 0 || (max <= value && max !== "") || value === "") {
  //   callback(new Error("请输入正确的年龄范围"));
  // } else {
  //   if (max <= 0 || max >= 100 || max === "" || max <= value) {
  //     callback(new Error("请输入正确的年龄范围"));
  //   } else {
  //     callback();
  //   }
  //   callback();
  // }
}

onMounted(() => {
  if (type.value == 0 || type.value == 1 || type.value == 2) {
    status.value = true;
  } else {
    status.value = false;
  }
  console.log(type.value, status.value);

  if (props.groupId) {
    initData();
  }
  // 显示拆分
  if (type.value == 2 || type.value == 6) {
    sonShow.value = true;
  } else {
    sonShow.value = false;
  }
});

function changeTimer1(e) {
  ageMax.value = e;
}
function changeTimer2(e) {
  ageMin.value = e;
}
// 年龄赛选
function disabledDateMin(time) {
  return (
    time.getTime() >= nowTime.value.getTime() ||
    time.getTime() <= new Date(ageMax.value).getTime()
  );
}

function disabledDateMax(time) {
  return time.getTime() >= nowTime.value.getTime();
}

// 是否有级别
function changeShow(e) {
  console.log(e);

  if (e == 1) {
    show.value = true;
  } else {
    show.value = false;
  }
  if (props.groupId) submitFN();
}
// 是否拆分
function changeSon(e) {
  if (e == 1) {
    son.value = true;
  } else {
    son.value = false;
  }
  // if (props.groupId) submitFN();
}

// 添加级
function addRank(list) {
  list.push({
    name: "",
  });
}

// 删除级
function delRank(list) {
  list.pop();
}

async function initData() {
  let arr = [];
  form.value.id = props.groupId;
  let res = await groupDetailsApi(form.value);
  queryParams.value = res.data;
  queryParams.value.name = res.data.name;
  queryParams.value.hasNext = res.data.hasNext;
  arr = res.data.birthPeriod.split(",");
  queryParams.value.min = arr[1];
  queryParams.value.max = arr[0];
  // if (queryParams.value.hasNext == 1) show.value = true;
  // queryParams.value.hasSon == 1 ? (son.value = true) : (son.value = false);
  queryParams.value.hasNext = queryParams.value.hasNext * 1;
  queryParams.value.hasSon = queryParams.value.hasSon * 1;
  if (props.signType == 2 || props.signType == 6) sonShow.value = true;
  if (queryParams.value.maleLevelList == null)
    queryParams.value.maleLevelList = [];
  if (queryParams.value.commonList == null) queryParams.value.commonList = [];
  if (queryParams.value.femaleLevelList == null)
    queryParams.value.femaleLevelList = [];
    
}

let validResult = ref(0);
let watchHandle = null;

// 保存
function submitFN() {
  // 清除监听防止出发多少监听
  if (watchHandle) {
    watchHandle();
    watchHandle = null;
  }
  validResult.value = 0;
  return new Promise(async (resolve, reject) => {
    watchHandle = watch(
      () => validResult.value,
      async (val) => {
        if (
          (val == list.value.length && !props.groupId) ||
          (val == 1 && props.groupId)
        ) {
          queryParams.value.cptId = props.cpt;
          if (cptId.value) {
            queryParams.value.cptId = cptId.value;
          }
          queryParams.value.cptProjectId = props.id;
          if (cptProjectId.value)
            queryParams.value.cptProjectId = cptProjectId.value;
          queryParams.value.birthPeriod = String(
            queryParams.value.max + "," + queryParams.value.min
          );
          let res = null;
          if (props.groupId && add) {
            // 编辑
            queryParams.value.id = props.groupId;
            queryParams.value.cptId = props.cptId;
            queryParams.value.cptProjectId = props.cptProjectId;
            res = await UpdateGroupApi(queryParams.value);
          } else {
            // 添加
            // queryParams.value.cptId = props.cptId;
            // queryParams.value.cptProjectId = props.cptProjectId;
            console.log(list.value);

            let arr = JSON.parse(JSON.stringify(list.value));
            arr.forEach((item) => {
              item.hasNext = "" + item.hasNext;
              item.hasSon = "" + item.hasSon;
              item.birthPeriod = String(item.max + "," + item.min);
            });
            res = await addGroups({ list: JSON.stringify(arr) });
          }
          if (res.code === 200) {
            groupId.value = res.data;
            flag.value = true;
            queryParams.value.name = "";
            queryParams.value.commonSupplement = {
              list: [],
              name: "",
            };
            queryParams.value.femaleSupplement = {
              list: [],
              name: "",
            };
            queryParams.value.maleSupplement = {
              list: [],
              name: "",
            };
            queryParams.value.max = "";
            queryParams.value.min = "";
            if (props.groupId) initData();
            proxy.$modal.msgSuccess("操作成功");
          } else {
            proxy.$modal.msgError("添加失败");
          }
          if (flag.value) {
            resolve();
          } else {
            reject();
          }
        } else {
          proxy.$modal.msgError("请完善信息");
        }
      }
    );

    // 表单验证
    if (props.groupId) {
      proxy.$refs["formRef"].validate((valid) => {
        if (valid) validResult.value++;
      });
    } else {
      proxy.$refs["formRef"].forEach((item) => {
        item.validate((valid) => {
          if (valid) validResult.value++;
        });
      });
    }
  });
}

// 下一步
async function nextStep() {
  await submitFN();
  await router.go(-1);
}

async function addSave() {
  add.value = true;
  await submitFN();
}

// 上一步
async function upStep() {
  if (flag.value) {
    emit("nextStep", 0, undefined, undefined, undefined, undefined);
  } else {
    await submitFN();
    if (flag.value)
      emit("nextStep", 0, undefined, undefined, undefined, undefined);
  }
}

// 修改级别名
async function manChange(val) {
  // UpdateClassApi
  let from = val;
  let res = null;
  if (from.id) {
    from.parentLevelId = val.cptGroupId;
    res = await UpdateClassApi(from);
  } else {
    res = await addGroupChi(from);
  }
  initData();
}

// 修改拆分级别
async function RankChange(val) {
  // updateSonLevel
  let from = val;
  let res = null;
  if (from.id) {
    // 编辑
    res = await updateSonLevel(from);
  } else {
    // 添加
    res = await addSonLevel(from);
  }
  await initData();
}

// 添加级别子集
function addRankFN(list, arr, num) {
  if (!list) {
    if (num == 1) {
      let maleSonLevelList = [];
      list = maleSonLevelList;
      queryParams.value.maleSonLevelList = list;
    } else if (num == 2) {
      let femaleSonLevelList = [];
      list = femaleSonLevelList;
      queryParams.value.femaleSonLevelList = list;
    } else if (num == 0) {
      let commonSonLevelList = [];
      list = commonSonLevelList;
      queryParams.value.commonSonLevelList = list;
    }
  }
  list.push({
    name: "",
    parentLevelId: arr[0].id,
  });

  console.log(queryParams.value.maleSonLevelList);
}

// 添加父级
function addRankFF(val, list, num) {
  if (!list) {
    if (num == 1) {
      let maleLevelList = [];
      list = maleLevelList;
    } else if (num == 2) {
      let femaleLevelList = [];
      list = femaleLevelList;
    } else if (num == 0) {
      let commonList = [];
      list = commonList;
    }
  }

  list.push({
    cptGroupId: props.groupId,
    cptId: val.cptId,
    levelType: num,
    name: "",
  });
}
// 删除子级别
function delRankFN(row) {
  let form = {};
  proxy.$modal
    .confirm('是否确认删除级名称为"' + row.name + '"的数据项？')
    .then(async function () {
      form.ids = row.id;
      await delCompetitionSonLevel(form);
    })
    .then(async () => {
      await initData();
      proxy.$modal.msgSuccess("操作成功");
    })
    .catch(() => {});
}

function delRankFF(row) {
  let form = {};
  proxy.$modal
    .confirm('是否确认删除级为"' + row.name + '"的数据项？')
    .then(async function () {
      form.ids = row.id;
      await delClass(form);
    })
    .then(async () => {
      await initData();
      proxy.$modal.msgSuccess("操作成功");
    })
    .catch(() => {});
}

// 添加组别
function addList() {
  let timer = new Date().getTime();
  list.value.push({
    hasNext: 0,
    hasSon: 0,
    maleSupplement: {
      name: "",
      list: [],
    },
    femaleSupplement: {
      name: "",
      list: [],
    },
    commonSupplement: {
      name: "",
      list: [],
    },
    tId: timer,
    cptId: props.cptId,
    cptProjectId: props.cptProjectId,
  });
}

// 添加后删除
function delList(row) {
  list.value = list.value.filter((item) => {
    return item.tId != row.tId;
  });

  // let form = {};
  // proxy.$modal
  //   .confirm('是否确认删除级名称为"' + row.name + '"的数据项？')
  //   .then(async function () {
  //     form.ids = row.id;
  //     await delCompetitionSonLevel(form);
  //   })
  //   .then(async () => {
  //     await initData();
  //     proxy.$modal.msgSuccess("操作成功");

  //   })
  //   .catch(() => {});
}
</script>

<style scope>
.text {
  margin-left: 120px;
  color: red;
  padding-bottom: 15px;
}
.eInput {
  width: 100px;
}
.el-form-item__error {
  width: 200px;
}
.button {
  margin-left: 10px;
}
.iconSpan {
  position: relative;
  top: 0.1rem;
  margin-right: 5px;
}
.el-row {
  border: 0;
}

.warningButton {
  position: relative;
  top: -120px;
  left: 750px;
}
</style>
